<template>
  <div class="q-pa-md">
    <div class="q-gutter-md" style="max-width: 300px ;display: flex;
    flex-direction: column;">
    <t-label
    valueType='static'
    constValue='这是一段静态文本'
    />

    <t-label
      valueType="static"
      constValue="这是一段有悬停文字的文本(同内容)"
      :showHint='true'
    />
     <t-label
      valueType="static"
      constValue="这是一段有悬停文字的文本(自定义)"
      :showHint='true'
       hintMode='custom'
       hintMsg='这是一段自定义的悬停文本'
    />


    <div style="gap: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;">

    <t-label
      :visible="visible"
     valueType='static'
    constValue='我是测试visible属性的文本'
    />
     <t-button  class="tr-button-default" @click="visible = !visible" > visible </t-button>
    </div>
        <t-label
    valueType='static'
    constValue='请点击我测试click事件'
    @click="handleClick"
    />
  </div>
  </div>
</template>

<script setup>
  import { useQuasar } from '@teld/q-components';
  import { ref } from 'vue';

  const $q = useQuasar();

  const label = ref('你好我是测试label');
  const visible = ref(true);
  const test = ref('你好我是点击切换label内容');
  const labelValue = ref('labelValue');

  function handleClick(params) {
   alert('click');
  }
  function f(params) {
    $q.notify('data-changed');
  }
</script>

<style lang="scss" scoped>
  .t-space {
    margin-bottom: 10px;
  }
  .t-label {
  line-height: 1.5;
  display: inline-block;
}
</style>
